<template>
  <div class="wrapper">
    <Header></Header>

    <ul>
      <li v-for="aqiFeedback in aqiFeedbackArr" :key="aqiFeedback.afId">
        <div class="left">
          <div class="icon" :style="{  backgroundColor: aqiFeedback.aqi.color }">
            {{ aqiFeedback.aqi.chineseExplain }}
          </div>
          <div class="info">
            <p>
              {{ aqiFeedback.gridProvince.provinceName }}
              {{ aqiFeedback.gridCity.cityName }}
              {{ aqiFeedback.afDate }}
            </p>
            <p>{{ aqiFeedback.address }}</p>
          </div>
        </div>
        <div class="right" @click="toFeedbackInfo(aqiFeedback.afId)">
          <p>去检测</p>
          <i class="fa fa-hand-o-right"></i>
        </div>
      </li>
    </ul>
    <div class="no-data" v-if="aqiFeedbackArrSize == 0">暂无任务</div>

    <footer>
      <img src="../assets/bottom.png" />
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getSessionStorage } from "../common.js";
import axios from "axios";
import Header from "../components/Header.vue";

const router = useRouter();
const gridMember = getSessionStorage("gridMember");

const aqiFeedbackArr = ref([]);
const aqiFeedbackArrSize = ref(0);

const init = async () => {
  axios
    .post("aqiFeedback/listAqiFeedbackByGmId", {
      gmId: gridMember.gmId,
      state: 1,
    })
    .then((response) => {
      aqiFeedbackArr.value = response.data;
      aqiFeedbackArrSize.value = aqiFeedbackArr.value.length;
    })
    .catch((error) => {
      console.log(error);
    });
};

const toFeedbackInfo = (afId) => {
  router.push({ path: "/feedbackInfo", query: { afId: afId } });
};

onMounted(async () => {
  await init();
});
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.header-box header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 12vw;
  padding: 0 4vw;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.left-slot,
.right-slot {
  width: 20vw; /* 和 logout 按钮宽度一致，右侧留空占位 */
  display: flex;
  align-items: center;
}

.center-title {
  flex-grow: 1;
  text-align: center;
  font-size: 5vw;
  font-weight: bold;
}

.logout-btn {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  color: white;
  padding: 1.5vw 3vw;
  border-radius: 5vw;
  font-size: 3.5vw;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
  user-select: none;
  border: none;
  outline: none;
}

.logout-btn:hover {
  background: linear-gradient(135deg, #ff5252, #ff7979);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
  transform: translateY(-1px);
}

.logout-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
}

.logout-btn i {
  margin-right: 1vw;
  font-size: 4vw;
}

.logout-btn span {
  letter-spacing: 0.5vw;
}

ul {
  width: 100%;
}
ul li {
  width: 100%;
  height: 18vw;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 3vw;
  border-bottom: dashed 1px #999;
  color: #666;
}
ul li .left {
  flex: 4;
}
ul li .right {
  flex: 1;
}

ul li .left {
  display: flex;
  align-items: center;
}
ul li .left .icon {
  width: 8vw;
  height: 8vw;
  background-color: #fe0000;
  border-radius: 1vw;
  margin-right: 3vw;

  text-align: center;
  line-height: 8vw;

  font-size: 4vw;
  color: #fff;
  font-weight: 700;
}
ul li .left .info p:first-child {
  font-size: 4vw;
  font-weight: 700;
  margin-bottom: 1vw;
}
ul li .left .info p:last-child {
  font-size: 3.4vw;
}

ul li .right {
  display: flex;
  align-items: center;
  font-size: 4vw;

  box-sizing: border-box;
  padding: 1vw 2vw;
  border: solid 1px #c6e2ff;
  background-color: #ecf5ff;
  border-radius: 1vw;
  color: #409eff;
}
ul li .right p {
  margin-right: 1vw;
}

.no-data {
  text-align: center;
  font-size: 5vw;
  color: #999;
}
</style>